<!-- 页面主体结构 -->
<template>
  <h1>hello,vue</h1>
  <h1>模版语法</h1>
  <h2>文本插值 - 最基本的数据绑定形式 - 双大括号语法</h2>
  a:{{ a }}
  <h2>展示原始Html - 扫码支付 </h2>
  <div v-html="b"></div>
  <h2>html属性绑定</h2>
  <div id="app2">id为app2</div>
  <!-- <div v-bind:id="id3">id为app3</div> -->
  <!-- 与上面的写法具有相同的效果 -->
  <div :id="id3">id为app3</div>
  <h2>直接使用js表达式</h2>
  {{ 1 + 1 }}
  <br>
  {{ a + 1 }}
  <br>
  {{ 1 == 1 ? "yes" : "no" }}
  <h1>响应式数据</h1>
  <h2>声明响应式数据</h2>
  响应式数据在页面中的使用
  count:{{ count }}
  <br>
  响应式数据在js代码中使用
  count.value
  <!-- 一个使count自增的按钮 -->
  <button @click="count++">
    count++
  </button>
  <button @click="countAdd">
    countAdd
  </button>
  <!-- 一个使 a 自增的按钮 -->
  a:{{ a }}
  <button @click="a++">
    a++
  </button>
  <h1>类与样式的绑定</h1>
  <h2> class绑定 </h2>
  <button @click="changeActive">切换active</button>
  <!-- active是类名 isActive是一个boolean值-->
  <div class="myDiv myDiv2" :class="{
    active: isActive,
    'text_success': noError,
  }">class-对象方式绑定</div>
  <div :class="[isActive ? 'active' : 'noActive', 'arrClass']">
    class-数组方式绑定
  </div>
  <h2> style绑定 </h2>
  <p>style写css属性名，使用小驼峰命名法</p>
  <p>或者'font-size'</p>
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">style绑定 - {{ activeColor }}</div>
  <button @click="changeActiveColor('blue')">蓝色</button>
  <button @click="changeActiveColor('green')">绿色</button>
  <button @click="changeActiveColor('orange')">黄色</button>
  <button @click="changeActiveColor('black')">黑色</button>

  <h1>条件渲染</h1>
  <h2> v-if v-else v-show</h2>
  <button @click="changeFlag">{{ flag }}</button>
  <div v-if="flag">白天 ☀️ </div>
  <div v-else>晚上 🌛</div>
  <p>
    v-if不满足条件时 dom会删除这个元素
    v-show不满足条件时 dom会隐藏这个元素
    区别：
    v-if：事件监听器和子组件都会被销毁与重建
    所以频繁切换 开销比较高
    v-if是惰性的 如果初始条件时false则不会创建这个元素
    v-show：css的display 无论初始条件时false还是true这个元素都会创建，条件变化时，元素也不会被销毁。
    如果需要频繁切换，就用v-show
  </p>
  <div v-show="flag">云朵 ☁️</div>
  <h1>列表渲染</h1>
  <h2>v-for</h2>
  <div v-for="a in arr">
    <p>{{ a }}</p>
  </div>
  <div v-for="(o, index) in obj" :key="o.id">
    <p>{{ index }}-姓名：{{ o.name }}-年龄：{{ o.age }}</p>
  </div>
  <!-- 生成n个指定标签 -->
  <p v-for="n in 10">{{ n }}</p>
  <h1>事件处理</h1>
  <h2>v-on 简写 @ 用于监听DOM事件</h2>
  <p>count:{{ count }}</p>
  <button @click="countAdd">count++</button>
  <button @click="countAddNum(3)">count+3</button>
  <!-- 捕获原生事件对象 -->
  <button @click="countAddEvent($event)">countEvent</button>
  <button v-on:click="countAdd">v-on:click-count++</button>
  <br>
  <br>
  <!-- 键盘事件 -->
  <input @keyup.enter="login" type="text">
  <input @keyup.alt.enter="enter" type="text">
  <!-- ctrl+点击 -->
  <!-- <input @click.ctrl="" type="text"> -->
  <!-- .left .right .middle -->
  <h1>表单输入与绑定</h1>
  <h2>基本用法</h2>
  用户名 ：{{ username }}
  密码 ：{{ password }}
  管理员：{{ checked }}
  性别：{{ gender }}
  爱好：{{ likes }}
  <br>
  用户名 <input v-model="username" type="text" placeholder="请输入用户名">
  密码 <input v-model="password" type="text" placeholder="请输入密码" @keyup.enter="login">
  <br>
  管理员<input type="checkbox" v-model="checked">
  <br>
  男<input type="radio" value="男" v-model="gender">
  女<input type="radio" value="女" v-model="gender">
  <br>
  爱好
  <select v-model="likes" multiple>
    <!-- 单值属性 -->
    <!-- :disabled="true" -->
    <!-- disabled -->
    <option :disabled="true" value="">请选择你的爱好</option>
    <!-- <option value="篮球">篮球</option> -->
    <!-- <option value="足球">足球</option> -->
    <option v-for="i in items" :value="i.value">{{ i.name }}</option>
  </select>
  <button @click="login">登录</button>
  <!-- 自定义组件的使用 -->
  <!-- 控制子组件的字体大小 -->
  <button @click="addFontSize">字体变大</button>
  <CountAdd ref="childRef" num="5"></CountAdd>
  <!-- 组件传参 -->
  <!-- <CountAdd num="10" /> -->
  <!-- 事件监听 -->

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</template>

<!-- 写js代码 -->
<script setup>
// 声明响应式数据
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
// 获取子组件
const childRef = ref(null);

// 导入自定义组件
import CountAdd from '@/components/CountAdd/CountAdd.vue'
const arr = ['苹果', '香蕉', '橘子'];
const obj = [
  { id: 1, name: 'zs', age: 12 },
  { id: 2, name: 'ls', age: 13 },
  { id: 3, name: 'ww', age: 14 },
];
// ref()函数 用于声明响应式状态
const username = ref("");
const password = ref("");
const checked = ref(true);
const gender = ref("男");
const likes = ref([]);
const items = ref([]);
// 父组件中的方法
function addFontSize () {
  console.log('🤡 CC - addFontSize - 增加子组件的字体大小',);
  if (childRef.value) {
    console.log('🤡 CC - addFontSize - childRef.value:', childRef.value);
    // childRef.value
    // 调用子组件中暴露出来的方法
    childRef.value.childAddFont();
  }
}
// 方法的调用
getItems();
// 模拟网络请求 方法的声明
function getItems () {
  var timeoutId = setTimeout(() => {
    // 发送网络请求 获取到了数据 http
    items.value = [
      { value: "🏀", name: "篮球" },
      { value: "⚽️", name: "足球" },
      { value: "🎾", name: "网球" },
    ]
  }, 5000);
  console.log('🤡 CC - timeoutId - timeoutId:', timeoutId);
}
const isActive = ref(true);
const noError = ref(true);
const activeColor = ref("hotpink");
const fontSize = "30";
const flag = ref(true);
// 声明一个初始值为0的响应式数据count
const count = ref(0);
// 响应式数据如果在js中使用 需要.value访问
console.log('🤡 CC - count:', count);
console.log('🤡 CC - count.value:', count.value);
count.value++
console.log('🤡 CC - count.value:', count.value);
// countAdd方法的声明
function countAdd () {
  count.value++;
}
function countAddNum (num) {
  count.value += num;
}
function countAddEvent (event) {
  console.log('🤡 CC - countAddEvent - event:', event);
}
function changeActive () {
  isActive.value = !isActive.value;
}
function changeActiveColor (color) {
  activeColor.value = color;
}
function changeFlag () {
  flag.value = !flag.value;
}
function login () {
  // alert("正在登录。。。")
  // admin 123
  console.log('🤡 CC - login -  username.value:', username.value);
  console.log('🤡 CC - login -  password.value:', password.value);
  var str = "";
  if (checked.value) {
    str = "管理员";
  }
  if (
    (username.value == "admin")
    &&
    (password.value == "123")
  ) {
    alert(str + "登录成功！")
  } else {
    alert(str + "用户名与密码不匹配！")
  }
}
function enter () {
  alert("换行")
}
// 声明一个变量a并且初始化
var a = 10;
var b = '<span style="color:red;">这个是一个文字为红色的span标签</span>';
var id3 = 'app3';

onMounted(
  () => {
    // alert("onMounted");
    console.log('🤡 CC - onMounted');
  }
)
onUpdated(() => {
  console.log('🤡 CC - onUpdated - onUpdated');
})
onUnmounted(() => {
  // alert('🤡 CC - onUnmounted - onUnmounted');
  // 组件被卸载 会触发 
  // 清除定时器 事件监听等内容
  clearTimeout(timeoutId);
  // clearInterval(intervalId);
})
</script>

<!-- 页面样式 -->
<style scoped>
.active {
  color: red;
  font-size: 26px;
}

.noActive {
  color: orange;
}
</style>
